<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ace="http://www.icefaces.org/icefaces/components"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>JSF 2.0 Hello World</title>
</h:head>
<h:body>
    <h3>JSF 2.0 Hello World Example - hello.xhtml</h3>
    <h:form>
<ui:composition>
        <h:panelGrid styleClass="animationHolderParent">
            <h:panelGrid styleClass="animationHolder">
                <h:outputText value="Pulsate Effect"/>
                <h:graphicImage id="pulsate" value="/img/a-blue_small.png" alt="n-darkGreen"/>
                <ace:animation event="click" name="pulsate" />
            </h:panelGrid>
        </h:panelGrid>

        <h:panelGrid columns="5" width="100">

            <h:panelGrid styleClass="animationHolderParent">
                <h:panelGrid styleClass="animationHolder">
                    <h:outputText value="Blind Effect"/>
                    <h:graphicImage id="blind" value="/img/a-blue_small.png" alt="a-blue"/>
                    <ace:animation event="click" name="blind"/>
                    <ace:animation event="click" name="highlight"/>
                </h:panelGrid>
            </h:panelGrid>



        </h:panelGrid>
</ui:composition>
    </h:form>
</h:body>
</html>